<template>
	<view>
		<nav-bar title="项目预约" @goBack="goBack"></nav-bar>
		<scroll-view scroll-y :style="{ height: mainHeight }">
			<view class="top-bg"></view>
			<view class="top-data">
				<view class="top">
					<view class="left">
						<image class="left-img" :src="data.imgData[0]" alt="" />
					</view>
					<view class="right">
						<view class="shop-name">
							<view class="name-left">
								<view class="name">{{ data.storeName }}</view>
							</view>
						</view>
						<view class="shop-name">
							<view class="tag-number" v-if="data.storeCode">No.{{data.storeCode}}</view>
							<view class="status">{{ data.status === 1 ? '营业中' : '暂停营业' }}</view>
						</view>
						<view class="shop-time">
							<view class="time-left">
								<u-icon name="clock" color="#666666" size="15"></u-icon>
								<view class="time">营业时间： {{ data.openingTime }}~{{ data.closingTime }}</view>
							</view>
						</view>
						<view class="shop-address">
							<view class="address-left">
								<view style="height: 30rpx;"><u-icon name="map" color="#666666" size="15"></u-icon>
								</view>
								<view class="address">
									{{ data.provinceString }}{{ data.cityString }}{{ data.countyString }}{{ data.detail
		            }}
								</view>
							</view>
						</view>
					</view>
					<view class="des">
						<view class="icon">
							<u-icon name="warning" color="#666666" size="15"></u-icon>
						</view>
						{{ data.intro }}
					</view>
				</view>
			</view>
			<view class="preview">
				<view class="title">
					<view class="box-line">
					</view>
					<view class="text">请选择服务开始时间</view>
				</view>
				<view style="margin: 30rpx 0;">
					<!-- :maxDate="1786778555000"-->
					<pickView v-model="dataTimer" mode="datetime" :minDate="now" @change="change"
						:formatter="formatter"></pickView>
				</view>
			</view>
		</scroll-view>
		<view class="btn_edit">
			<view class="btn_cont" v-if="isShow" @click="toReserve">
				下一步
			</view>
			<view class="btn_cont" style="background-color: #c7c5c5;color: #333;" v-else>
				下一步
			</view>
		</view>

	</view>
</template>

<script>
	import NavBar from "@/components/nav-bar"
	import api_home from '@/api/home'
	import pickView from "@/components/pickerView/pickerView"
	import store from "@/store"
	export default {
		name: "chooseTime",
		components: {
			NavBar,
			pickView
		},
		data() {
			return {
				transferData: {},
				data: {},
				dataTimer: new Date().getTime(),
				chooseProject: {},
				selectedDate: null, // 初始选择的日期值
				isShow: false,
				advanceReservation: '',
				now: new Date().getTime() // 当前时间戳
			}
		},
		onLoad(option) {
			if (option.transferData) {
				this.transferData = JSON.parse(decodeURIComponent(option.transferData))
				this.getDetail(this.transferData.storeId)
			}
			if (option.chooseProject) {
				this.chooseProject = JSON.parse(decodeURIComponent(option.chooseProject))
				// console.log(this.transferData,this.chooseProject);
			}
		},
		onShow() {
			if (!this.transferData) {
				const params = uni.getStorageSync('transferData')
				this.transferData = JSON.parse(decodeURIComponent(params))
			}
		},
		onReady() {
			// 微信小程序需要用此写法
			// this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods: {
			change(e) {
				// console.log(this.dataTimer, "dataTimer", e.value);
				this.dataTimer = e.value
				this.isShow = false
				this.getShowValue(e.value)
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},
			onDateChange(value) {
				this.selectedDate = value;
				// console.log('用户选择的日期：', value);
			},
			goBack() {
				const params = encodeURIComponent(JSON.stringify(this.transferData))
				uni.setStorageSync('transferData', params)
			},
			getDetail(id) {
				api_home.fetchShopDetail(id).then((res) => {
					const imgData = res.data.images.split(",")
					this.advanceReservation = res.data.advanceReservation
					// console.log(this.advanceReservation, 'this.advanceReservation');
					this.data = {
						...res.data,
						imgData
					}
					this.getShowValue(this.now)
				})
			},
			toReserve() {
				// 创建一个新的Date对象
				var date = new Date(this.dataTimer);
				// 获取年、月、日、小时、分钟和秒
				var year = date.getFullYear();
				var month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以加1，并且前面补0
				var day = ('0' + date.getDate()).slice(-2); // 日前面补0
				var hours = ('0' + date.getHours()).slice(-2); // 小时前面补0
				var minutes = ('0' + date.getMinutes()).slice(-2); // 分钟前面补0
				var seconds = ('0' + date.getSeconds()).slice(-2); // 秒前面补0
				// 格式化日期和时间字符串
				var formattedDate = year + '-' + month + '-' + day
				var formattedTime = hours + ':' + minutes + ':' + seconds
				// 将格式化后的日期和时间存储在相应的字段中
				var reserveDate = formattedDate
				var reserveTime = formattedTime
				const transferData = {
					...this.transferData,
					projectId: this.chooseProject.id,
					projectName: this.chooseProject.itemName,
					price: this.chooseProject.price,
					memberType: this.chooseProject.memberType,
					duration: this.chooseProject.duration,
					reserveDate: reserveDate,
					reserveTime: reserveTime
				}
				const params = encodeURIComponent(JSON.stringify(transferData))
				uni.navigateTo({
					url: `/subPages/home/chooseMaster?transferData=${params}`
				})
			},
			getShowValue(data) {
				const date = new Date(data);
				const timestamp =  date.getTime()
				console.log(timestamp, 'timestamp');
				const fiveDaysLater = parseInt(Number(this.now) + Number(this.advanceReservation * 24 * 60 * 60 *
					1000))
				this.isShow = timestamp <= fiveDaysLater
				// console.log('dataTime111',this.now,timestamp,fiveDaysLater,this.advanceReservation);
				if (!this.isShow) {
					uni.showToast({
						title: '不能超出可预约天数' + this.advanceReservation + '天',
						icon: 'none'
					})
				}
			}
		},
		// watch:{

		// }
	}
</script>

<style lang="scss" scoped>
	.top-bg {
		width: 100%;
		height: 120rpx;
		opacity: 1;
		background: rgba(194, 126, 21, 1);
	}

	.top-data {
		opacity: 1;
		border-radius: 17rpx;
		background: rgba(255, 255, 255, 1);
		margin: 0 38rpx;
		margin-top: -100rpx;
		padding: 46rpx 44rpx 31rpx 42rpx;

		.top {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.left {
				width: 130rpx;
				height: 130rpx;
				position: relative;

				.left-img {
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
				}

				.img-tag {
					position: absolute;
					bottom: -20rpx;
					left: 10.2rpx;
					width: 106rpx;
					height: 40rpx;
					font-size: 20rpx;
					font-weight: 500;
					line-height: 40rpx;
					color: rgba(255, 255, 255, 1);
					text-align: center;
					opacity: 1;
					border-radius: 31rpx;
				}
			}

			.right {
				width: calc(100% - 150rpx);

				.shop-name {
					display: flex;
					margin-bottom: 14rpx;
					align-items: center;

					.name-left {
						display: flex;

						.name {
							font-size: 32rpx;
							font-weight: 500;
							color: rgba(51, 51, 51, 1);
							height: 37rpx;
							line-height: 37rpx;
						}


					}

					.tag-number {
						width: auto;
						height: 37rpx;
						padding: 5rpx 8rpx;
						opacity: 1;
						border-radius: 8rpx;
						border: 1rpx solid rgba(253, 90, 57, 1);
						text-align: center;
						font-size: 20rpx;
						font-weight: 400;
						color: rgba(253, 89, 57, 1);
						box-sizing: border-box;
						// margin-left: 20rpx;
					}

					.status {
						width: 99rpx;
						height: 37rpx;
						opacity: 1;
						border-radius: 8rpx;
						background: rgba(255, 237, 234, 1);
						line-height: 37rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: rgba(253, 89, 57, 1);
						text-align: center;
						margin-left: 12rpx;
					}

				}

				.shop-time {
					display: flex;
					justify-content: space-between;
					margin-bottom: 14rpx;
					align-items: center;

					.time-left {
						display: flex;

						.time {
							font-size: 22rpx;
							font-weight: 400;
							color: rgba(102, 102, 102, 1);
							margin-left: 10rpx;
						}
					}

				}

				.shop-address {
					display: flex;
					justify-content: space-between;

					.address-left {
						display: flex;

						// align-items: center;
						.address {
							font-size: 22rpx;
							font-weight: 400;
							color: rgba(102, 102, 102, 1);
							margin-left: 9rpx;
						}
					}
				}
			}

			.des {
				display: flex;
				align-items: start;
				font-size: 27rpx;
				padding: 25rpx 15rpx 15rpx 15rpx;

				.icon {
					margin-top: 5rpx;
				}
			}
		}

	}

	.preview {
		opacity: 1;
		border-radius: 17rpx;
		background: rgba(255, 255, 255, 1);
		margin: 0 38rpx;
		margin-top: 24rpx;
		padding: 26rpx 41rpx 34rpx 39rpx;

		.title {
			position: relative;
			width: 100%;
			margin-left: -39rpx;
			margin-bottom: 20rpx;

			.box-line {
				position: absolute;
				left: 0;
				top: 0;
				width: 15rpx;
				height: 48rpx;
				opacity: 1;
				background: rgba(194, 126, 21, 1);

			}

			.text {
				margin-left: 44rpx;
				font-size: 38rpx;
				font-weight: 500;
			}
		}

		.des {
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 40.54rpx;
			color: rgba(51, 51, 51, 1);

		}

		.shop-img {
			display: flex;

			.img {
				width: 32%;
				height: 180rpx;
				border-radius: 11rpx 11rpx 11rpx 11rpx;
				opacity: 1;
				margin-right: 1%;

				.img-item {
					width: 100%;
					height: 100%;
					border-radius: 11rpx 11rpx 11rpx 11rpx;
				}
			}
		}

	}
</style>